<template>
  <div class="box">
    购物车页面
    <div class="checkbox-icon" v-for="item in goods" :key="item.item_id">
      <input type="checkbox" />
      <van-card
        :num="'合计:' + item.num * (item.price / 100).toFixed(2) + '元'"
        :price="(item.price / 100).toFixed(2)"
        :title="item.item_name"
        :thumb="item.imgsrc"
      >
        <template #footer>
          <van-button size="mini" >+</van-button>
          <van-button size="mini">{{ item.num }}</van-button>
          <van-button size="mini">-</van-button>
        </template>
      </van-card>
    </div>

    <div class="button">
      <div class="button-div">
        <input type="checkbox" />已选(<span>3</span>)
      </div>
      <div>
        <div>商品金额:<span>￥287.00</span></div>
        <div>应付金额以结算页为准</div>
      </div>
      <button>结算</button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "cart",
  data() {
    return {
      num: 0,
      goods: [],
    };
  },
  computed: {
    ...mapState(["goods"]),
  },
  methods: {
  },
};
</script>

<style scoped>
.box {
  margin-bottom: 70px;
}
.checkbox-icon {
  display: flex;
  align-items: center;
}
.checkbox-icon input {
  margin: 0 8px;
}
.van-button--mini {
  width: 20px;
}
.button {
  background: #fff;
  border-top: 1px solid #999;
  width: 100%;
  height: 40px;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
}
.button .button-div {
  line-height: 50px;
}
</style>
